<template>
    <div class="register-container">
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form"
            auto-complete="on" label-position="left">

            <div class="title-container">
                <h3 class="title">用户注册</h3>
            </div>

            <el-form-item prop="userName">
                <div class="itemBox">
                    <span class="svg-container">
                        <svg-icon icon-class="user" />
                    </span>
                    <el-input ref="userName" v-model="registerForm.userName" placeholder="用户名" name="userName"
                        type="text" tabindex="1" auto-complete="on" />
                </div>
            </el-form-item>

            <el-form-item prop="name">
                <div class="itemBox">
                    <span class="svg-container">
                        <svg-icon icon-class="user" />
                    </span>
                    <el-input ref="name" v-model="registerForm.name" placeholder="真实姓名" name="name" type="text"
                        tabindex="2" auto-complete="on" />
                </div>
            </el-form-item>

            <el-form-item prop="password">
                <div class="itemBox">
                    <span class="svg-container">
                        <svg-icon icon-class="password" />
                    </span>
                    <el-input :key="passwordType" ref="password" v-model="registerForm.password" :type="passwordType"
                        placeholder="密码" name="password" tabindex="3" auto-complete="on" />
                    <span class="show-pwd" @click="showPwd">
                        <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                    </span>
                </div>
            </el-form-item>

            <el-form-item prop="confirmPassword">
                <div class="itemBox">
                    <span class="svg-container">
                        <svg-icon icon-class="password" />
                    </span>
                    <el-input :key="confirmPasswordType" ref="confirmPassword" v-model="registerForm.confirmPassword"
                        :type="confirmPasswordType" placeholder="确认密码" name="confirmPassword" tabindex="4"
                        auto-complete="on" />
                    <span class="show-pwd" @click="showConfirmPwd">
                        <svg-icon :icon-class="confirmPasswordType === 'password' ? 'eye' : 'eye-open'" />
                    </span>
                </div>
            </el-form-item>

            <el-form-item prop="email">
                <div class="itemBox">
                    <span class="svg-container">
                        <i class="el-icon-message"></i>
                    </span>
                    <el-input ref="email" v-model="registerForm.email" placeholder="邮箱" name="email" type="email"
                        tabindex="5" auto-complete="on" />
                </div>
            </el-form-item>

            <el-form-item prop="phone">
                <div class="itemBox">
                    <span class="svg-container">
                        <i class="el-icon-phone"></i>
                    </span>
                    <el-input ref="phone" v-model="registerForm.phone" placeholder="手机号码" name="phone" type="tel"
                        tabindex="6" auto-complete="on" />
                </div>
            </el-form-item>

            <el-form-item prop="gender">
                <div class="itemBox">
                    <span class="svg-container">
                        <i class="el-icon-user"></i>
                    </span>
                    <el-select v-model="registerForm.gender" placeholder="请选择性别" style="width: 100%">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="0"></el-option>
                    </el-select>
                </div>
            </el-form-item>

            <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
                @click.native.prevent="handleRegister">注册</el-button>

            <div class="tips">
                <span>已有账号？</span>
                <router-link to="/login" class="login-link">立即登录</router-link>
            </div>

        </el-form>
    </div>
</template>

<script>
import { register } from '@/api/user'

export default {
    name: 'Register',
    data() {
        const validateUserName = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入用户名'))
            } else if (value.length < 3) {
                callback(new Error('用户名不能少于3位'))
            } else {
                callback()
            }
        }
        const validateName = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入真实姓名'))
            } else {
                callback()
            }
        }
        const validatePassword = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入密码'))
            } else if (value.length < 6) {
                callback(new Error('密码不能少于6位'))
            } else {
                callback()
            }
        }
        const validateConfirmPassword = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请确认密码'))
            } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入的密码不一致'))
            } else {
                callback()
            }
        }
        const validateEmail = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入邮箱'))
            } else {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
                if (!emailRegex.test(value)) {
                    callback(new Error('请输入正确的邮箱格式'))
                } else {
                    callback()
                }
            }
        }
        const validatePhone = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入手机号码'))
            } else {
                const phoneRegex = /^1[3-9]\d{9}$/
                if (!phoneRegex.test(value)) {
                    callback(new Error('请输入正确的手机号码'))
                } else {
                    callback()
                }
            }
        }
        const validateGender = (rule, value, callback) => {
            if (value === null || value === undefined || value === '') {
                callback(new Error('请选择性别'))
            } else {
                callback()
            }
        }
        return {
            registerForm: {
                userName: '',
                name: '',
                password: '',
                confirmPassword: '',
                email: '',
                phone: '',
                gender: null,
                avatar: '',
                createTime: '',
                updateTime: '',
                id: 0
            },
            registerRules: {
                userName: [{ required: true, trigger: 'blur', validator: validateUserName }],
                name: [{ required: true, trigger: 'blur', validator: validateName }],
                password: [{ required: true, trigger: 'blur', validator: validatePassword }],
                confirmPassword: [{ required: true, trigger: 'blur', validator: validateConfirmPassword }],
                email: [{ required: true, trigger: 'blur', validator: validateEmail }],
                phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
                gender: [{ required: true, trigger: 'change', validator: validateGender }]
            },
            loading: false,
            passwordType: 'password',
            confirmPasswordType: 'password'
        }
    },
    methods: {
        showPwd() {
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
            this.$nextTick(() => {
                this.$refs.password.focus()
            })
        },
        showConfirmPwd() {
            if (this.confirmPasswordType === 'password') {
                this.confirmPasswordType = ''
            } else {
                this.confirmPasswordType = 'password'
            }
            this.$nextTick(() => {
                this.$refs.confirmPassword.focus()
            })
        },
        handleRegister() {
            this.$refs.registerForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    // 准备提交的数据，移除确认密码字段
                    const submitData = {
                        userName: this.registerForm.userName,
                        name: this.registerForm.name,
                        password: this.registerForm.password,
                        email: this.registerForm.email,
                        phone: this.registerForm.phone,
                        gender: this.registerForm.gender,
                        avatar: this.registerForm.avatar || ''
                    }

                    register(submitData).then(response => {
                        this.$message.success('注册成功！请登录')
                        this.$router.push('/login')
                        this.loading = false
                    }).catch(error => {
                        this.$message.error('注册失败，请检查输入信息')
                        this.loading = false
                    })
                } else {
                    console.log('表单验证失败')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.register-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;

    .register-form {
        position: relative;
        width: 520px;
        max-width: 100%;
        padding: 80px 35px 0;
        margin: 0 auto;
        overflow: hidden;
    }

    .tips {
        font-size: 14px;
        color: #fff;
        margin-bottom: 10px;
        text-align: center;

        .login-link {
            color: #409EFF;
            text-decoration: none;
            margin-left: 5px;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .itemBox {
        display: flex;
        align-items: center;
        padding: 0 10px;
    }

    .svg-container {
        padding: 6px 0;
        color: $dark_gray;
        vertical-align: middle;
        display: block;
        margin-right: 10px;
        i {
            font-size: 16px;
        }
    }

    .title-container {
        position: relative;

        .title {
            font-size: 26px;
            color: $light_gray;
            margin: 0px auto 40px auto;
            text-align: center;
            font-weight: bold;
        }
    }

    .show-pwd {
        font-size: 16px;
        color: $dark_gray;
        cursor: pointer;
        user-select: none;
        margin-left: 10px;
    }

    .el-form-item {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        color: #454545;
    }
}
</style>